<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			title="销售统计报表" @clickLeft="back" />
		<uni-notice-bar show-icon scrollable style="height: 15px;"
				:speed="50" text="注意:连锁店用户在9:00~22:00只能查询间隔6个月范围内数据信息!" />	


		<uni-forms :modelValue="baseFormData.name" ref="form" style="margin-left: 10px;" >
			

			<uni-forms-item label="连锁店:" style="margin-top: 15px; width: 75%;" name="chainStore">
					<uni-combox style="width: 85%;  margin-left: -10px;"  :candidates="candidates" placeholder="所有连锁店" v-model="chain"  @input="getHandle(chain)"></uni-combox>
			</uni-forms-item>
			<button type="warn" size="mini" @click="clearInput" style="position: relative; left: 80%;top: -55px;">清空</button>
			<uni-forms-item label="经手人:" style="margin-top: -35px; z-index: 2;" name="handledBy">
				<uni-data-select style="width: 40%;  margin-left: -10px; " v-model="baseFormData.handledBy"
					placeholder="所有经手人" :localdata="handler"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="日期:" style="margin-top: -5px;"  name="documentTime">
				<view class="example-body" style="width: 40%; border-top: 5px;">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="baseFormData.startTime"  />
				</view>						
				<uni-text style="position: absolute; left: 43%; top: 15rpx;">至</uni-text>
				<view class="example-body" style="width: 40%; position: absolute; left: 50%; top: 0px;">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="baseFormData.endTime"  />
				</view>
			</uni-forms-item>
			<view>
				<button size="mini" type="primary" style="top: -15px;" @click="submit">查询报表</button>
			</view>
		</uni-forms>


		<uni-table ref="table" border stripe style="position: relative; top: -10px;">
			<uni-tr>
				<uni-th width="80" align="center">年份</uni-th>
				<uni-th width="70" align="center">净售量</uni-th>
				<!-- <uni-th width="20" align="center">赠品量</uni-th> -->
				<uni-th width="70" align="center">净售额</uni-th>
				<uni-th width="90" align="center">净成本</uni-th>
				<uni-th width="90" align="center">利润</uni-th>
				<uni-th width="50" align="center">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in tableData" :key="index">
				<uni-td align="center">{{ item.year }}</uni-td>
				<uni-td align="center">{{ item.netSalesVolume }}</uni-td>
				<!-- <uni-td align="center">{{ item.giftQuantity }}</uni-td> -->
				<uni-td align="center">{{ item.netSalesAmount }}</uni-td>
				<uni-td align="center">{{ item.netCost }}</uni-td>
				<uni-td align="center">{{item.profit}}</uni-td>
				<uni-td align="center" >
					<view class="uni-group" >
						<!-- <uni-icons type="redo" size="25" @click="details(item.year)"></uni-icons> -->
						<!-- <uni-icons type="redo" size="25" @click="details(item.year)"></uni-icons> -->						
						<button size="mini" type="primary" style="height: 25px;width: 50px;background-color: rgb(0, 122, 255)" @click="details(item.yearId,item.year)" icon='shop'>
							<text style="font-size: 12px; position: absolute; left: 12px;top: -1px;">品牌</text>
						</button>
						<button size="mini" type="primary" style="height: 25px;width: 50px;background-color: palevioletred" @click="details(item.yearId,item.year)" icon='shop'>
							<text style="font-size: 12px; position: absolute; left: 12px;top: -1px;">类别</text>
						</button>
					</view>					
				</uni-td>
			</uni-tr>
		</uni-table>



	</view>
</template>

<script>
	import getdateTime from '@/common/getdateTime.js'
	import {baseUrl} from 'libs/util/global'
	export default {
		data() {
			return {
				candidates: [],
				chain: '',
				tableData: [],
				store: [], // 连锁店下拉框
				handler: [], // 经手人下拉框
				// 表单数据
				baseFormData: {
					chainStore: '',
					handledBy: '',
					startTime: '',
					endTime: ''	
				},
				chainStore: null,
				chainStoreName: null,
				loginUserId: null,
				loginUserType: null,
				authority: null


			}
		},
		mounted() {
			this.getStorage()
		},
		onLoad(option) {
			uni.getStorage({
				key: 'userId',
				success:(res)=> {
					// console.log(res.data + "登录用户id:"+res.data)
					this.loginUserId = res.data
				}
			});
			uni.getStorage({
				key: 'isChain',
				success:(res) =>{
					// console.log(res.data + "登录用户类型:"+res.data)
					this.loginUserType = res.data
				}
			});
			uni.getStorage({
				key: 'authority',
				success:(res) =>{
					// console.log(res.data + "登录用户权限:"+res.data)
					this.authority  = res.data
				}
			});
			// 获取当天时间
			var timeStr = getdateTime.dateTimeStr('y-m-d')
			this.baseFormData.startTime = timeStr
			this.baseFormData.endTime = timeStr
		},
		methods: {
			clearInput(){
				this.chain = ''
				this.baseFormData.chainStore = null
			},
			getHandle(chain){
				console.log("查看chain:"+chain)				
				if(chain == ""){
					this.baseFormData.chainStore = ''
				}else{
					console.log("进入判断")
					for (var i = 0; i < this.store.length; i++) {
						if(this.store[i].text === chain){
							console.log(this.store[i].value)
							this.baseFormData.chainStore = this.store[i].value
							this.changeStore(this.store[i].value)
						}
					}
				}
			},
			
			
			// 左上角返回按钮
			back() {
				uni.switchTab({
					url: '/pages/work/work'
				})
			},
			
			//获取连锁店名称
			getChainStoreName(storeId){
				uni.request ({
					url: baseUrl+'/chain/getChainName/'+storeId,
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					method: 'GET',
					data: {},
					success: (res) => {
						console.log(res.data.msg)
						this.chainStoreName = res.data.msg
					}
				})
			},
			// 店员下拉框选中
			changeStore(e) {
				
				if(e == ''){
					console.log("店员下拉框"+e)
					this.handler = []
				}else{
					let url = baseUrl+'/chain/clerk/' + e
					uni.request({
						url: url,
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						method: 'GET',
						data: {},
						success: (res) => {							
								// 店员下拉框信息
								// console.log(res.data.data)
								this.handler = res.data.data							
						}
					})
				}
				
			},
			// 获取连锁店下拉框
			getStorage() {	
				console.log("获取连锁店下拉框")
				let url =
					baseUrl+'/chain/store/' +
					this.loginUserId + "/" + this.loginUserType
				uni.request({
					url: url,
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					method: 'GET',
					data: {},
					success: (res) => {
						this.store = res.data.data 
						for (var i = 0; i < this.store.length; i++) {
							this.candidates.push(this.store[i].text) 
						}
					}
				})						
					},
			//提交表单数据
			submit() {
			
					console.log("连锁店："+this.baseFormData.chainStore)
					
					this.chainStore = this.baseFormData.chainStore
					
					
					console.log(this.baseFormData.chainStore)
					if(this.baseFormData.chainStore != '' ){
						console.log("进入")
						uni.request ({
							url: baseUrl+'/chain/getChainName/'+this.baseFormData.chainStore,
							header: {
								'content-type': 'application/x-www-form-urlencoded'
							},
							method: 'GET',
							data: {},
							success: (res) => {
								console.log(res.data.msg)
								this.chainStoreName = res.data.msg
							}
						})
					}
					this.tableData = null															
						
						// 判断时间
					let time = new Date()
					var startTime = new Date(this.baseFormData.startTime);
					var endTime = new Date(this.baseFormData.endTime);
					var timeDiff = endTime.getTime() - startTime.getTime() ;
					
					var dateDiff = timeDiff/(24 * 3600 * 1000) - 180;
					
					console.log(dateDiff)
						
						uni.showLoading({
								title: "加载中...."
						})
						// 时间范围判断
						if(time.getHours() >= 9 && time.getHours() <= 22 && this.loginUserType == 1){
							// 9:00 到 22：00 只能查询6个月内数据
							// console.log("允许通过的时间范围内")
							if(dateDiff<0){
								console.log("这里是允许通过的时间范围内")
								// 判断连锁店名称合法性
								if(this.candidates.indexOf(this.chain,0) >= 0 || this.chain === ''){
									uni.request({
										url: baseUrl+'/sales/year',
										header: {
											'content-type': 'application/json'
										},
										method: 'POST',
										data: {
											userId: this.loginUserId,
											userType: this.loginUserType,
											chainStore: this.baseFormData.chainStore,
											handledBy: this.baseFormData.handledBy,
											startTime: this.baseFormData.startTime,
											endTime: this.baseFormData.endTime
										},
										success: (res) => {		
											// console.log(res)
											if (res.data.data.length >0) {
												setTimeout(function() {
														uni.hideLoading();
													}, 200)
													if(this.authority == 2){
														
														for (var i = 0; i < res.data.data.length; i++) {
															res.data.data[i].netCost = '0.00'
															res.data.data[i].profit = '0.00'
														}
														
														this.tableData = res.data.data
													}else{
														this.tableData = res.data.data
													}
												this.tableData = res.data.data																			
											} else {
													uni.showToast({
														title: '该时间段没有数据！',
														icon: 'none',
														duration: 1000
													});
											}
										}
									})
								}else{
									console.log("不存在")
									uni.showToast({
									title: '请输入正确的连锁店名称!',
									icon: 'none',
									duration: 500
										});
									this.tableData = null
								}
								
							}else{
								uni.showToast({
								title: '9:00 - 22:00 只能能查最近6个月内数据',
								icon: 'none',
								duration: 1000
									});
							}
						}else{ // 总部用户查询
						
						// 判断连锁店名称合法性
						if(this.candidates.indexOf(this.chain,0) >= 0 || this.chain === ''){
							console.log("存在")	
							uni.request({
								url: baseUrl+'/sales/year',
								header: {
									'content-type': 'application/json'
								},
								method: 'POST',
								data: {
									userId: this.loginUserId,
									userType: this.loginUserType,
									chainStore: this.baseFormData.chainStore,
									handledBy: this.baseFormData.handledBy,
									startTime: this.baseFormData.startTime,
									endTime: this.baseFormData.endTime
								},
								success: (res) => {		
									// console.log(res)
									if (res.data.data.length >0) {
										setTimeout(function() {
												uni.hideLoading();
											}, 200)
											if(this.authority == 2){
												
												for (var i = 0; i < res.data.data.length; i++) {
													res.data.data[i].netCost = '0.00'
													res.data.data[i].profit = '0.00'
												}
												
												this.tableData = res.data.data
											}else{
												this.tableData = res.data.data
											}
																												
									} else {
											uni.showToast({
												title: '该时间段没有数据！',
												icon: 'none',
												duration: 1000
											});
									}
								}
							})
							}else{
								console.log("不存在")
								uni.showToast({
								title: '请输入正确的连锁店名称!',
								icon: 'none',
								duration: 500
									});
								this.tableData = null
							}
							
						}
						
							


			},
			// 进入详情
			details(yearId,year) {
				// this.getChainStoreName(this.baseFormData.chainStore)
				console.log("单选店铺名称："+this.chainStoreName)
				console.log("进入详情")
				console.log("=======详情时间：" + yearId)
				console.log("=======详情年份：" + year)
				let chainStore = this.baseFormData.chainStore;
				console.log("========店铺id:" + chainStore)
				let handledBy = this.baseFormData.handledBy;
				console.log("======店铺经手人：" + handledBy)
				let startTime = this.baseFormData.startTime
				console.log("======开始时间：" + startTime)
				let endTime = this.baseFormData.endTime
				console.log("======结束时间：" + endTime)
				uni.navigateTo({
					url: '/pages/form/quanterSales/quanterSales?yearId=' + yearId + 
					'&year=' + year + 
					'&chainStore=' + chainStore +
					'&handledBy=' + handledBy + 
					'&startTime=' + startTime +
					'&endTime='+endTime +
					'&chainStoreName=' + this.chainStoreName
				})
			}

		}


	}
</script>

<style>
	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}

	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 30px;
		height: 30px;
	}

	.slot-text {
		flex: 1;
		font-size: 14px;
		color: #4cd964;
		margin-right: 10px;
	}


	.content {
		width: 100%;
		height: 100vh;
	}

	.table-header {
		position: sticky;
		left: 0;
		top: 0;
		z-index: 1;
		background-color: lavenderblush;
	}

	//冻结表头第一列
	/deep/ .uni-table-tr .uni-table-td:first-child {
		position: sticky;
		left: 0;
		top: 0;
		background-color: lavenderblush;
		z-index: 1;
	}

	/deep/ .uni-table-tr {
		overflow: visible;
		background-color: #fff;
	}

	/deep/ .uni-table-tr .uni-table-th:first-child {
		position: sticky;
		left: 0;
		top: 0;
		background-color: #fff;
		z-index: 1;
	}
	
</style>